<template>
	<view>
		<view class="integral-log-header">
			<image class="bg" :src="statics.moneyRecharge"></image>
			<view class="main pd24_20">
				<view class="flex alcenter space card">
					<view>
						<view class="flex alcenter">
							<text class="ft14 ">{{$t('My earnings')}}</text>
						</view>
						<view class="mt16 flex alcenter">
							<image :src="statics.integralImg01" style="width: 40rpx; height: 40rpx;"></image>
							<text class="ml10 ft20  ftw600">${{urerdata.money}}</text>
						</view>
					</view>
					<navigator open-type="redirect" url="/pages/fenxiao/qrshare">
						<view class="btn-integral">{{$t('fenxiao.share')}}</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="integral-log-main pd16_15">
			<view class="mb30">
				<view class="cl-green ft16 mb15">{{$t('Distribution instructions')}}</view>
				<view class="level1 ft14" v-if="fxdj[1]">{{$t('Direct commission')}} {{fxdj[1]*100}}%</view>
				<view class="level2 ft14" v-if="fxdj[2]">{{$t('Secondary commission')}} {{fxdj[2]*100}}%</view>
				<view class="level3 ft14" v-if="fxdj[3]">{{$t('Third level commission')}} {{fxdj[3]*100}}%</view>
			</view>
			<rich-text class="cont" :nodes="textcon"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				money: '',
				urerdata: [],
				fxdj: [],
				textcon: ''
			}
		},
		onLoad: function() {
			this.urerdata = uni.getStorageSync("userinfo")
			this.fxdj = uni.getStorageSync("config").site.fxdj
			this.artinfo()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('Distribution instructions')
			});
		},
		methods: {
			async artinfo() {
				let data = {
					type: 'fenxiao'
				};
				let [err, res] = await this.$httpas.get('/api/index/artinfo', data);
				if (res.data.code == 1) {
					this.textcon = res.data.data.content
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main {

		.card {
			color: #563010;
			border-radius: 20rpx;
			padding: 40rpx 50rpx;
			background: linear-gradient(270deg, #FAC250 0%, #FDDE76 100%);
		}
	}

	.integral-log-main {
		margin-top: 26rpx;
	}
</style>
<style>
	.integral-log-header {
		position: relative;
		height: 252rpx;
	}

	.integral-log-header .bg {
		width: 100%;
		height: 252rpx;
	}

	.integral-log-header .main {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.btn-integral {
		width: 192rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 40rpx;
		color: #3D3D3D;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 500;
		opacity: 0.8;
	}

	.integral-log-main {
		background: #FFFFFF;
		min-height: 800rpx;
		position: relative;
		margin-top: -12rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.level1 {
		background-color: bisque;
		padding: 20rpx;
	}

	.level2 {
		background-color: #dcd7f7;
		padding: 20rpx;
	}

	.level3 {
		background-color: #cddced;
		padding: 20rpx;
	}
</style>